<template>
  <div class="attraction-list">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="'/home'">首页</el-breadcrumb-item>
      <el-breadcrumb-item>北京</el-breadcrumb-item>
      <el-breadcrumb-item>游玩榜</el-breadcrumb-item>
    </el-breadcrumb>
    <el-tabs v-model="activeTab">
      <el-tab-pane label="必游人气版" name="popular">
        <el-card v-for="(attraction, index) in attractions" :key="index" class="attraction-card">
          <div class="attraction-header">
            <span class="rank">TOP {{ index + 1 }}</span>
            <img :src="attraction.image" alt="" class="attraction-img">
            <div class="attraction-info">
              <h3>{{ attraction.name }}</h3>
              <el-rate :value="attraction.rating" disabled />
              <span class="review-count">{{ attraction.reviewCount }}条评价</span>
              <p>{{ attraction.description }}</p>
              <p class="price">{{ attraction.price }}起</p>
            </div>
          </div>
          <el-tag type="success" v-if="attraction.award">同时入选</el-tag>
          <el-tag type="danger" v-if="attraction.rank">北京必游人气版[第{{ attraction.rank }}名]</el-tag>
        </el-card>
      </el-tab-pane>
      <!-- 其他tab-pane可类似添加 -->
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'popular',
      attractions: [
        {
          name: '北京环球度假区',
          image: 'https://ts3.cn.mm.bing.net/th?id=OIP-C.dnkVEk_HL7KrV6GTxH_irgHaE8&w=306&h=204&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2',
          rating: 4.5,
          reviewCount: 34000,
          description: '霸天虎过山车，需提前预订，网红地打卡，看热门IP，玩精彩项目',
          price: 500,
          award: true,
          rank: 1
        },
        {
          name: '故宫',
          image: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.v3sMt8JZ3ASRX8HkXdxHvAHaEB?w=336&h=182&c=7&r=0&o=5&dpr=1.3&pid=1.7',
          rating: 4.8,
          reviewCount: 50000,
          description: '世界文化遗产，中国古代宫廷建筑，丰富的历史文物',
          price: 60,
          award: true,
          rank: 2
        },
        {
          name: '长城',
          image: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.s295ecE7H4BE-KovW90grgHaFj?w=247&h=185&c=7&r=0&o=5&dpr=1.3&pid=1.7',
          rating: 4.7,
          reviewCount: 45000,
          description: '世界文化遗产，中国古代防御工程，壮观的山景',
          price: 45,
          award: true,
          rank: 3
        },
        {
          name: '颐和园',
          image: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.2XECxSRRyCXiPqfncV96vgHaE8?w=234&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7',
          rating: 4.6,
          reviewCount: 40000,
          description: '皇家园林，美丽的湖泊和建筑，丰富的文化活动',
          price: 35,
          award: true,
          rank: 4
        },
        {
          name: '天安门广场',
          image: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.TS-pF1enb_vOkgrfkFtmdwHaE7?w=222&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7',
          rating: 4.9,
          reviewCount: 60000,
          description: '重要的政治和文化中心，壮观的升旗仪式',
          price: 0,
          award: true,
          rank: 5
        },
        {
          name: '圆明园遗址公园',
          image: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.JjM4WKIVont8wDyofbPBVAHaE8?w=275&h=183&c=7&r=0&o=5&dpr=1.3&pid=1.7',
          rating: 4.4,
          reviewCount: 30000,
          description: '历史遗址，了解清朝历史和园林艺术',
          price: 20,
          award: true,
          rank: 6
        }
      ]
    }
  }
}
</script>

<style scoped>
.attraction-list {
  padding: 20px;
}
.attraction-card {
  margin-bottom: 20px;
}
.attraction-header {
  display: flex;
  align-items: center;
}
.rank {
  background-color: #f56c6c;
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  margin-right: 10px;
}
.attraction-img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  margin-right: 20px;
}
.attraction-info {
  flex: 1;
}
.price {
  color: #f56c6c;
  font-weight: bold;
}
</style>
